<template>
  <el-container>
  <!--头部区域-->
    <el-header>
      <div>
        <img src="" alt="">
        <span>海羽生活馆管理平台</span>
      </div>

      <div>
        <el-avatar type="info" :src="avatar[this.$baseLodash.random(0,2)]" class="avatar"></el-avatar>
        <span class="userName">
          <el-dropdown>
            <span class="el-dropdown-link">{{thisTime}},{{userPwdForm.username}}
             <i class="el-icon-arrow-down el-icon--right"> </i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-refresh" @click.native="openUpdPwd">修改密码</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-close" @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
    </el-header>
    <!--页面主体区域-->
    <el-container>
      <!--侧边栏-->
      <el-aside  :width="isCollapse?'64px':'200px'">
        <!---->
        <div class="toggle-button" @click="switchCollapse">|||</div>
        <!--侧边栏菜单去-->
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF" :unique-opened="true" :router="true" :collapse-transition='false' :collapse="isCollapse"
          :default-active:="itemIndex">
          <!-- 一级菜单 -->
          <el-submenu :index="item.id+''" v-for="item in menusList" :key="item.id">
            <!-- 一级菜单模板区域 -->
            <template slot="title">
              <!--图标-->
              <!-- <i :class="'el-icon-'+item.icon"></i> -->
              <i class="el-icon-location"></i>
              <!--文本-->
              <span>{{item.authName}}</span>
            </template>
            <!--二级菜单-->
            <el-menu-item :index="'/'+itemChild.path" v-for="itemChild in item.children" :key = "itemChild.id" @onclick="OnChangeItemIndex('/'+itemChild.path)">
              <template slot="title">
                <!--图标-->
                 <i class="el-icon-menu"></i> 
                <!-- <i :class="'el-icon-'+itemChild.icon"></i> -->
                <!--文本-->
                <span>{{itemChild.authName}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--右侧内容主题-->
      <el-main>
        <!--路由占位符-->
        <router-view></router-view>
      </el-main>
    </el-container>
        <!--修改密码-->

    <el-dialog
        title="修改密码"
        :visible.sync="dialogUpdVisible"
        @close="closeUpdPwd"
        width="40%">
        <el-form :model="userPwdForm" :rules="scheduleFormrules"  ref='updPwdFormruleForm' label-width="100px">
          <el-form-item label="用 户 名" prop="username">
              <el-input v-model="userPwdForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="原 密 码" prop="originPassword">
              <el-input v-model="userPwdForm.originPassword" type='password'></el-input>
          </el-form-item>
          <el-form-item label="新 密 码" prop="newPassword">
              <el-input v-model="userPwdForm.newPassword" type='password'></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repeat">
              <el-input v-model="userPwdForm.repeat" type='password'></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdVisible=false">取 消</el-button>
            <el-button type="primary" @click="updPwd">确 定</el-button>
        </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from 'axios'
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  data(){
    return{
      userPwdForm:{
        "username":"",
        "originPassword": "",
        "newPassword": "",
        "repeat": "",
      },
      thisTime:"",
      //左侧菜单数据
      menusList: [],
      isCollapse :false,
      dialogUpdVisible:false,
      itemIndex:"",
      "avatar": [
        "https://i.gtimg.cn/club/item/face/img/2/15922_100.gif",
        "https://i.gtimg.cn/club/item/face/img/8/15918_100.gif",
        "https://i.gtimg.cn/club/item/face/img/8/15908_100.gif",
      ],
      scheduleFormrules:{
        originPassword:[
          { required: true, message: '请输入原密码', trigger: 'blur' },
          // { min: 6, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        newPassword:[
          { required: true, message: '请输入新密码', trigger: 'blur' },
           { min: 6, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        repeat:[
          { required: true, message: '请确认新密码', trigger: 'blur' },
           { min: 6, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
    }
  },
  created(){
      this.getMenuList();
      const hour = new Date().getHours();
      this.thisTime =
        hour < 8 ?
        "早上好" :
        hour <= 11 ?
        "上午好" :
        hour <= 13 ?
        "中午好" :
        hour < 18 ?
        "下午好" :
        "晚上好";

      this.userPwdForm.username=window.sessionStorage.getItem('username');
      console.log(this.userPwdForm.username);
  },
  methods:{
    logout(){
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    closeUpdPwd(){
      this.$refs.updPwdFormruleForm.resetFields()
      this.username="";
      this.originPassword="";
      this.newPassword="";
      this.repeat="";
    },
    openUpdPwd(){
      this.dialogUpdVisible=true;
    },
    updPwd(){
      this.$refs.updPwdFormruleForm.validate(async valid=>{
        this.$axios.put(
            'user/password/modify',
            this.userPwdForm,
            {
              headers:{
                  'Accept':'*/*',
                  'Authorization': window.sessionStorage.getItem('token'),
                  'Content-Type':'application/json',
                  'X-Requested-With':'XMLHTTPRequest'
              }
            }
        )
        .then(res=>{
          console.log('请求成功',res)
          if(res.data.code==200){
            this.$message.success("修改成功");
            this.closeUpdPwd;
          }else
          { 
            this.$message.error(res.data.message);
          }
        })
        .catch(Error=>{
          console.log('请求失败',Error)
        })
      })  
    },
    async getMenuList() {
      this.menusList = [{
        'authName':'用户管理',
        'id':110,
        'path':'users',
        'icon':'menu',
        'children':[{
          'authName':'用户列表',
          'id':110,
          'path':'users',
          'icon':'setting'
          }]
          },{
          'authName':'权限管理',
          'id':120,
          'path':'rights',
          'children':[{
            'authName':"角色列表",
            'id':121,
            'path':'roles'
          },
          {
            'authName':'权限列表',
            'id':122,
            'path':'rights'
          }
          ]
        },
        {
          'authName':'场地管理',
          'id':130,
          'path':'gyms',
          'children':[{
            'authName':"场馆管理",
            'id':131,
            'path':'gyms'
          },
          {
            'authName':'场地管理',
            'id':132,
            'path':"areas"
          },
          {
            'authName':'球场管理',
            'id':133,
            'path':"courts"
          }]
        },
        {
          'authName':'排班管理',
          'id':140,
          'path':'scheduleManager',
          'children':[{
            'authName':"排班模板维护",
            'id':141,
            'path':'ScheduleTemp'
          },{
            'authName':"排班管理",
            'id':142,
            'path':'ScheduleMain'
          }]
        },
        {
          'authName':'订单管理',
          'id':150,
          'path':'orderList',
          'children':[{
            'authName':"订单查询",
            'id':151,
            'path':'orderList'
          }]
        },
        {
          'authName':'综合查询',
          'id':160,
          'path':'orderList',
          'children':[
          {
            'authName':"用户画像",
            'id':162,
            'path':'userPic'
          }]
        }
      ]
    },
    switchCollapse(){
      this.isCollapse = !this.isCollapse;
    },
    OnChangeItemIndex(path){
      this.itemIndex = path
    }
  }
}
</script>
<style lang="less" scoped>
    .el-container
    {
      height: 100%;
    }
    .el-header{
      background-color: #373d41;
      color: white;
      font-size: 20px;

      display: flex;
      justify-content: space-between;
      align-items: center;   //纵向居中对齐，让退出按钮上下留空
      >div{
        display: flex;
        align-items: center; //纵向居中对齐
      }
    }
    .userName{
      margin-left: 16px;
    }

    .el-dropdown-link{
      font-size: 16px;
      color: #fff;
    }

    .el-aside{
      background-color: #333744;
          .el-menu{
            border-right: 0px;
          }
    }
    .el-main{
      background-color: #eaedf1;
    }
    .el-submenu{
      text-align: left;
      font-size: 40px;
    }
    .toggle-button{
      background-color: #4a5064;
      font-size:10px;
      color: #fff;
      line-height: 24px;
      text-align: center;
      letter-spacing: 0.2em;
    }
</style>
